<template>
     <!-- 最外层的容器 -->
     <view class="my-settle-container">
       <!-- 全选区域 -->
        <label class="radio" @click="changeAllState">
         	<radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
        </label>
      
        <!-- 合计区域 -->
        <view class="amount-box">
          合计:<text class="amount">￥{{totalPrice}}</text>
        </view>
        
        <!-- 结算区域 -->
        <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
     </view>
</template>

<script>
    import {mapGetters,mapMutations,mapState}  from 'vuex'
    export default {
        name:"my-settle",
        data() {
            return {
              // 倒计时秒数
              seconds: 3
            };
        },
        computed:{
            ...mapGetters("m_cart",['isFullCheck','totalPrice','checkedCount']),
              ...mapGetters("m_user",['addstr']),
              ...mapState('m_user',['token'])
        },
        methods:{
            ...mapMutations('m_cart',['updateAllGoodsState']),
            // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用
              ...mapMutations('m_user', ['updateRedirectInfo']),
            // 全选点击事件处理函数
            changeAllState(){
                // console.log(this.isFullCheck)
                this.updateAllGoodsState(!this.isFullCheck)
            },
            // 结算条件的判断
            settlement(){
                // 是否选择了商品
                if(this.checkedCount === 0) return uni.$showMsg('请选择要结算的商品')
                // 是否选择了收货地址
                if(!this.addstr) return uni.$showMsg('请选择收货地址')
                // 用户是否登录 判断token是否存在
                // if(!this.token) return uni.$showMsg('请先登录')
                if(!this.token) {return this.delayNavigate()}
                
                // console.log('可以结算了');
            },
           delayNavigate() {
           	for (let i = 0; i <= this.seconds; i++) {
           		setTimeout(() => {
           	if (i === this.seconds) {
           	// console.log('跳转')
            uni.switchTab({
             url: '/pages/my/my',
             success:() => {
                 // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
                this.updateRedirectInfo({
                // 跳转的方式
                openType: 'switchTab',
                // 从哪个页面跳转过去的
                from: '/pages/cart/cart'
                 })
             }
            })
            	} else {
           	// console.log('展示倒计时', this.seconds - i)
            uni.showToast({
             title: `未登录，将在${this.seconds-i}秒后跳转到登录页面`,
             duration: 1000,
             mask: true,
             icon: 'none'
                    })
            	}
           	}, i * 1000)
            	 }
            },
        }
    }
</script>

<style lang="scss">
.my-settle-container {
  /* 底部固定定位 */
  position: fixed;
  bottom: 0;
  left: 0;
  /* 设置宽高和背景色 */
  width: 100%;
  height: 50px;
  background-color: white; // 将背景色从 cyan 改为 white
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount-box {
    .amount {
      color: #c00000;
    }
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}
</style>